<template>
	<!-- 团长中心 -->
	<view class="page">
		<view class="user-box color-base-bg">
			<view class="user-all-msg">
				<view class="user-msg">
					<image :src="$util.img(community_Info.community_img)" mode="aspectFill"></image>
					<view class="user-msg2">
						<text class="user-name">{{community_Info.name}}<text v-if="community_Info.level_name">{{community_Info.level_name}}</text></text>
						<text class="user-address">{{community_Info.community}}自提点</text>
					</view>
				</view>
				<text class="iconfont iconsaoma saoma" @click="jump('/otherpages/verification/index/index?type=community')"></text>
			</view>
		</view>
		<view class="float-box mar-top">
			<view class="box-item line">
				<view class="declare">
					<text class="declare-num">{{ (parseFloat(community_Info.balance) + parseFloat(community_Info.balance_money)).toFixed(2) }}</text>
					<text class="declare-name">可提现</text>
				</view>

				<button type="default" class="declare-btn" @click="$util.redirectTo('/otherpages/member/apply_withdrawal/apply_withdrawal')">申请提现</button>
			</view>
			<view class="box-item">
				<view class="declare flex-center" @click="jump('/otherpages/community/community_detail/community_account?cl_id='+community_Info.cl_id)">
					<text class="declare-num">{{community_Info.commission_total}}</text>
					<text class="declare-name">累计佣金(元)</text>
				</view>
				<view class="declare flex-center" @click="jump('/otherpages/member/withdrawal/withdrawal')">
					<text class="declare-num">{{community_Info.balance_withdraw}}</text>
					<text class="declare-name">累计提现(元)</text>
				</view>
				<view class="declare flex-center" @click="jump('/otherpages/member/withdrawal/withdrawal')">
					<text class="declare-num">{{community_Info.balance_withdraw_apply}}</text>
					<text class="declare-name">提现中(元)</text>
				</view>
			</view>
		</view>
		<view class="float-box">
			<view class="box-item line">
				<text class="title">订单概况</text>
			</view>
			<view class="box-item">
				<view class="declare flex-center" @click="jump('/otherpages/community/community_detail/community_order?cl_id='+community_Info.cl_id)">
					<text class="declare-num ">{{community_Info.order_complete_num}}</text>
					<view class="declare-name teli">
						<view>订笔数(笔)</view>
						<image @click.stop="ordertip1()" :src="$util.img('upload/uniapp/community/explain.png')" mode=""></image>
					</view>
				</view>
				<view class="declare flex-center" @click="jump('/otherpages/community/community_detail/community_order?cl_id='+community_Info.cl_id)">
					<text class="declare-num">{{community_Info.day_order_count}}</text>
					<view class="declare-name teli">
						<view>今日订单(笔)</view>
						<image @click.stop="ordertip2()" :src="$util.img('upload/uniapp/community/explain.png')" mode=""></image>
					</view>
				</view>
				<view class="declare flex-center" @click="jump('/pages/order/activist/activist?cl_id='+community_Info.cl_id)">
					<text class="declare-num">{{community_Info.refund_order_count}}</text>
					<view class="declare-name teli">
						<view>售后订单(笔)</view>
						<image @click.stop="ordertip3()" :src="$util.img('upload/uniapp/community/explain.png')" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		<view class="group-box">
			<view class="group-item" @click="jump('/otherpages/community/community_detail/community_order?cl_id='+community_Info.cl_id)">
				<image :src="$util.img('upload/uniapp/community/community_leader_icon1.png')" mode="widthFix"></image>
				<text class="item-name">我的订单</text>
			</view>
			<view class="group-item" @click="jump('/otherpages/community/community_detail/community_delivery')">
				<image :src="$util.img('upload/uniapp/community/community_leader_icon2.png')" mode="widthFix"></image>
				<text class="item-name">配送单</text>
			</view>
			<view class="group-item" @click="jump('/otherpages/community/community_detail/promote_code?type=1')">
				<image :src="$util.img('upload/uniapp/community/community_leader_icon3.png')" mode="widthFix"></image>
				<text class="item-name">推广二维码</text>
			</view>
			<view class="group-item" @click="jump('/otherpages/community/community_detail/community_verification')">
				<image :src="$util.img('upload/uniapp/community/community_leader_icon5.png')" mode="widthFix"></image>
				<text class="item-name">核销记录</text>
			</view>
			<view class="group-item" @click="jump('/otherpages/community/community_detail/community_account?cl_id='+community_Info.cl_id)">
				<image :src="$util.img('upload/uniapp/community/community_leader_icon4.png')" mode="widthFix"></image>
				<text class="item-name">账单</text>
			</view>
		</view>
		<ns-login ref="login"></ns-login>
		<loading-cover ref="loadingCover"></loading-cover>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				token: '',
				site_id: '',
				community_Info: {}
			}
		},
		onLoad() {
			if (uni.getStorageSync('token')) {
				this.token = uni.getStorageSync('token')
				this.Getpermissions()
			} else {
				this.$refs.login.open('/pages/member/index/index');
			}
			setTimeout(() => {
				if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
			}, 500)
		},
		methods: {
			ordertip1() {
				uni.showModal({
					title: '提示',
					content: '已完成的订单总数量',
					showCancel: false,
					confirmColor: '#FF6706'
				});
			},
			ordertip2() {
				uni.showModal({
					title: '提示',
					content: '今日已付款的订单总数',
					showCancel: false,
					confirmColor: '#FF6706'
				});
			},
			ordertip3() {
				uni.showModal({
					title: '提示',
					content: '售后退款订单的总数量',
					showCancel: false,
					confirmColor: '#FF6706'
				});
			},
			// 团长信息
			Getpermissions() {
				this.$api.sendRequest({
					url: '/api/community/getLeaderDetail',
					data: {
						site_id: this.$config.siteId,
						token: this.token
					},
					success: res => {
						if (res.code == 0) {
							this.community_Info = res.data
						}
					}
				});
			},
			jump(e) {
				this.$util.redirectTo(e)
			},
		}
	}
</script>

<style lang="scss">
	.teli {
		height: 50rpx;
		display: flex;
		align-items: center;

		image {
			padding-top: 4rpx;
			padding-left: 6rpx;
			width: 30rpx;
			height: 30rpx;
		}
	}

	.page {
		.user-box {
			width: 100%;
			height: 410rpx;

			.user-all-msg {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 30rpx;
				padding-top: 90rpx;

				.user-msg {
					display: flex;
					align-items: center;

					image {
						width: 108rpx;
						height: 108rpx;
						border-radius: 50%;
						border: 4rpx solid white;
					}

					.user-msg2 {
						display: flex;
						align-items: flex-start;
						flex-direction: column;
						margin-left: 12rpx;

						.user-name {
							display: flex;
							align-items: center;
							color: white;
							font-size: 32rpx;

							text {
								font-size: 24rpx;
								background-color: #F6B373;
								padding: 4rpx 20rpx;
								letter-spacing: 2rpx;
								margin-left: 10rpx;
								border-radius: 26rpx;
							}
						}

						.user-address {
							padding-top: 10rpx;
							color: white;
							font-size: 24rpx;
						}
					}
				}

				.saoma {
					color: white;
					font-size: 56rpx;
				}

				image {
					width: 40rpx;
				}
			}
		}

		.float-box {
			padding: 20rpx 30rpx;
			border-radius: 15rpx;
			margin: 0 30rpx;
			background-color: white;
			margin-top: 20rpx;

			.box-item {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.title {
					color: #303133;
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: bold;
				}

				.declare {
					display: flex;
					align-items: flex-start;
					flex-direction: column;

					.declare-num {
						font-weight: 500;
						color: #303133;
						font-size: 40rpx;
					}

					.declare-name {
						color: #909399;
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 500;
					}
				}

				.flex-center {
					margin-top: 20rpx;
					align-items: center;
				}

				.declare-btn {
					margin: 0;
					width: 140rpx;
					height: 48rpx;
					line-height: 48rpx;
					padding: 0;
					background-color: #FF6706;
					color: white;
					border: none;
					font-size: 24rpx;
				}
			}

			.flex-wrap {
				flex-wrap: wrap;
			}

			.line {
				padding-bottom: 20rpx;
				border-bottom: 2rpx solid #EEEEEE;
			}
		}

		.group-box {
			border-radius: 15rpx;
			margin: 0 30rpx;
			background-color: white;
			margin-top: 20rpx;
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			padding-top: 10rpx;

			.group-item {
				width: 33%;
				display: flex;
				align-items: center;
				flex-direction: column;
				justify-content: center;
				margin: 30rpx 0;

				image {
					width: 40rpx;
					margin-bottom: 10rpx;
				}

				.item-name {}
			}
		}

		.mar-top {
			margin-top: -120rpx;
		}
	}
</style>
<style scoped></style>
